<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="box">
                    <div class="left">
                        <p>本月预警处理次数</p>
                        <div class="leftIMG">
                            <p class="big">{{ this.toMonthAllNum }}</p>
                            <p class="small"><span>{{ this.currentMonth }}</span>月预警处理次数</p>
                            <p class="baifenbi">{{ (this.yichuliNum / this.toMonthAllNum).toFixed(2) * 100 }}%</p>
                        </div>
                        <!-- <p>最快处理时间<span class="fastTime">6</span>分钟</p> -->
                        <div class="bottom">
                            <div class="bl">
                                <p><span class="num">{{ this.yichuliNum }}</span>次</p>
                                <p>已处理次数</p>
                            </div>
                            <div class="br">
                                <p><span class="num">{{ this.weichuliNum }}</span>次</p>
                                <p>未处理次数</p>
                            </div>
                            <img class="xiegang" src="../../../assets/Frame134.png" alt="">
                        </div>
                    </div>
                    <div class="center">
                        <div class="centerIMG">
                            <p class="big">本月处理率<span class="num">{{ this.toMonthAllNum == 0 ? '0.00' : (this.yichuliNum
                                /
                                this.toMonthAllNum).toFixed(2) * 100
                                    }}</span>%</p>
                            <p class="small">上月处理率<span class="num">{{ this.lastyichuliNum == 0 ? '0.00'
                                : (this.lastyichuliNum /
                                    this.lasttoMonthAllNum).toFixed(2) * 100 }}</span>%</p>
                        </div>
                    </div>
                    <div class="right">
                        <p>上月预警处理次数</p>
                        <div class="leftIMG">
                            <p class="big">{{ this.lasttoMonthAllNum }}</p>
                            <p class="small"><span>{{ this.previousMonth }}</span>月预警处理次数</p>
                            <p class="baifenbi">{{ (this.lastyichuliNum / this.lasttoMonthAllNum).toFixed(2) * 100 }}%
                            </p>
                        </div>
                        <!-- <p>最快处理时间<span class="fastTime">10</span>分钟</p> -->
                        <div class="bottom">
                            <div class="bl">
                                <p><span class="num">{{ this.lastyichuliNum }}</span>次</p>
                                <p>已处理次数</p>
                            </div>
                            <div class="br">
                                <p><span class="num">{{ this.lastweichuliNum }}</span>次</p>
                                <p>未处理次数</p>
                            </div>
                            <img class="xiegang" src="../../../assets/Frame134.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getwarningListed } from "@/api/warning";

export default {
    name: "alertHandlingCount",  //预警处理次数
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            currentIndex: 0,
            pageNo: 1,
            pageSize: 10,
            dateType: 3,
            toDAY: '',
            firstDAY: '',
            serviceType: '',
            serviceType2: '',

            toMonthAllNum: 0,
            lasttoMonthAllNum: 0,
            yichuliNum: 0,
            lastyichuliNum: 0,
            weichuliNum: 0,
            lastweichuliNum: 0,
            ToMonChuliLvNum: 0,
            currentMonth: 0,
            previousMonth: 0,
            lastFistDay: '',
            lastEndDay: '',
        };
    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.getFirstDayOfMonthFormatted()
            this.getTodayFormatted()
            this.getCurrentAndPreviousMonth()
            this.getFirstDayOfPreviousMonthFormatted()
            this.getLastDayOfPreviousMonthFormatted()
            this.getList()
            this.yichuli()
            this.weichuli()
            this.lastyichuli()
            this.lastweichuli()
            this.lastgetList()
        }
    },
    mounted() {
        // this.getTodayFormatted()
        // this.getFirstDayOfMonthFormatted()
        // this.getList()
        // this.yichuli()
        // this.weichuli()
        // this.getCurrentAndPreviousMonth()
        // this.getFirstDayOfPreviousMonthFormatted()
        // this.getLastDayOfPreviousMonthFormatted()
        // this.lastyichuli()
        // this.lastweichuli()
        // this.lastgetList()
    },
    methods: {
        //本月处理总次数
        async getList() {
            let res = await getwarningListed({
                // month: this.nowMonth,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                dayType: this.dateType,
                startTime: new Date(`${this.firstDAY} 00:00:00`).getTime() / 1000,
                endTime: new Date(`${this.toDAY} 23:59:59`).getTime() / 1000,
                warningType: this.serviceType,
                warningStatus: this.serviceType2

                // zoneId: null,
                // warningStatus: null,
            });

            if (res.code == 200) {
                console.log('本月预警处理次数', res.data.count);
                this.toMonthAllNum = res.data.count
            }
        },
        //上个月月处理总次数
        async lastgetList() {

            let res = await getwarningListed({
                // month: this.nowMonth,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                dayType: this.dateType,
                startTime: new Date(`${this.lastFistDay} 00:00:00`).getTime() / 1000,
                endTime: new Date(`${this.lastEndDay} 23:59:59`).getTime() / 1000,
                warningType: this.serviceType,
                warningStatus: this.serviceType2

                // zoneId: null,
                // warningStatus: null,
            });

            if (res.code == 200) {
                console.log('上个月月预警处理次数', res.data.count);
                this.lasttoMonthAllNum = res.data.count
            }
        },
        //本月已处理次数
        async yichuli() {
            let res = await getwarningListed({
                // month: this.nowMonth,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                dayType: this.dateType,
                startTime: new Date(`${this.firstDAY} 00:00:00`).getTime() / 1000,
                endTime: new Date(`${this.toDAY} 23:59:59`).getTime() / 1000,
                warningType: this.serviceType,
                warningStatus: 3

            });

            if (res.code == 200) {
                console.log('本月已处理次数', res.data.count);
                this.yichuliNum = res.data.count
                // console.log('本月zong处理次数', this.toMonthAllNum);

            }
        },
        //上个月已处理次数
        async lastyichuli() {
            let res = await getwarningListed({
                // month: this.nowMonth,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                dayType: this.dateType,
                startTime: new Date(`${this.lastFistDay} 00:00:00`).getTime() / 1000,
                endTime: new Date(`${this.lastEndDay} 23:59:59`).getTime() / 1000,
                warningType: this.serviceType,
                warningStatus: 3

            });

            if (res.code == 200) {
                console.log('上个月已处理次数', res.data.count);
                this.lastyichuliNum = res.data.count

            }
        },
        //本月未处理次数
        async weichuli() {
            let res = await getwarningListed({
                // month: this.nowMonth,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                dayType: this.dateType,
                startTime: new Date(`${this.firstDAY} 00:00:00`).getTime() / 1000,
                endTime: new Date(`${this.toDAY} 23:59:59`).getTime() / 1000,
                warningType: this.serviceType,
                warningStatus: 0

                // zoneId: null,
                // warningStatus: null,
            });

            if (res.code == 200) {
                // console.log('本月未处理次数', res.data.count);
                this.weichuliNum = res.data.count
            }
        },
        //上个月未处理次数
        async lastweichuli() {
            let res = await getwarningListed({
                // month: this.nowMonth,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                dayType: this.dateType,
                startTime: new Date(`${this.lastFistDay} 00:00:00`).getTime() / 1000,
                endTime: new Date(`${this.lastEndDay} 23:59:59`).getTime() / 1000,
                warningType: this.serviceType,
                warningStatus: 0

                // zoneId: null,
                // warningStatus: null,
            });

            if (res.code == 200) {
                console.log('上个月未处理次数', res.data.count);
                this.lastweichuliNum = res.data.count
            }
        },
        // 获取今天的日期
        getTodayFormatted() {
            const today = new Date();
            // 设置为上一个月
            today.setMonth(today.getMonth() - 1);
            const toDAYMonth = this.formatDate(today).substring(0, 7);
            // console.log('toDAYMonth', toDAYMonth);

            if (toDAYMonth == this.nowMonth) {
                //如果当前所选月份为当日所在月份 则当月最后一天为当前天数
                const [year, month] = toDAYMonth.split('-').map(str => parseInt(str, 10));
                // 创建表示下个月第一天的 Date 对象
                const lastDay = new Date(year, month, 1); // 设置为0会回退到上个月的最后一天
                const lastDayFormatted = lastDay.toISOString().split('T')[0]; // "YYYY-MM-DD"
                this.toDAY = lastDayFormatted;
            } else {
                //如果所选月份不为当日所在月份 则当月最后一天为月末天数
                const [year, month] = this.nowMonth.split('-').map(str => parseInt(str, 10));
                // 创建表示下个月第一天的 Date 对象
                const lastDay = new Date(year, month, 1); // 设置为0会回退到上个月的最后一天
                const lastDayFormatted = lastDay.toISOString().split('T')[0]; // "YYYY-MM-DD"
                this.toDAY = lastDayFormatted;
            }
            console.log('当前月份最后一天', this.toDAY);

        },

        // 获取本月第一天的日期
        getFirstDayOfMonthFormatted() {
            const today = new Date();
            // 设置为上一个月
            today.setMonth(today.getMonth() - 1);
            const toDAYMonth = this.formatDate(today).substring(0, 7);
            if (toDAYMonth == this.nowMonth) {
                const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
                this.firstDAY = this.formatDate(firstDayOfMonth);
                console.log('当前月份第一天', this.firstDAY);
            } else {
                const [year, month] = this.nowMonth.split('-').map(str => parseInt(str, 10));
                // 创建表示下个月第一天的 Date 对象
                const firstDay = new Date(year, month - 1, 2); // 注意：月份是从0开始计数的
                const firstDayFormatted = firstDay.toISOString().split('T')[0]; // "YYYY-MM-DD"
                this.firstDAY = firstDayFormatted
                console.log('当前月份第一天', this.firstDAY);
            }



        },
        // 获取当前月份和上一个月的月份
        getCurrentAndPreviousMonth() {
            const today = new Date();
            today.setMonth(today.getMonth() - 1);
            const toDAYMonth = this.formatDate(today).substring(0, 7);
            if (toDAYMonth == this.nowMonth) {
                this.currentMonth = this.formatMonth(new Date(today.getFullYear(), today.getMonth(), 1));
                this.previousMonth = this.formatMonth(new Date(today.getFullYear(), today.getMonth() - 1, 1));
                console.log('当前月份', this.currentMonth);
                console.log('上一个月份', this.previousMonth);
            } else {
                console.log('this.nowMonth', this.nowMonth);
                const currentMonth = parseInt(this.nowMonth.split('-')[1], 10);
                this.currentMonth = currentMonth;
                if (currentMonth === 1) {
                    this.previousMonth = 12; // 如果是1月，上个月是去年12月
                } else {
                    this.previousMonth = currentMonth - 1; // 正常情况减1
                }
                console.log('当前月份', this.currentMonth);
                console.log('上一个月份', this.previousMonth);
            }

        },
        // 获取上一个月的第一天
        getFirstDayOfPreviousMonthFormatted() {
            const today = new Date(); // 设置为上一个月
            today.setMonth(today.getMonth() - 1);
            const toDAYMonth = this.formatDate(today).substring(0, 7);
            if (toDAYMonth == this.nowMonth) {
                const previousMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
                this.lastFistDay = this.formatDate(previousMonth);
                console.log('获取上一个月的第一天', this.lastFistDay);
            } else {
                const [year, month] = this.nowMonth.split('-').map(str => parseInt(str, 10));
                // 创建表示下个月第一天的 Date 对象
                const firstDay = new Date(year, month - 2, 2); // 注意：月份是从0开始计数的
                const firstDayFormatted = firstDay.toISOString().split('T')[0]; // "YYYY-MM-DD"
                this.lastFistDay = firstDayFormatted
                console.log('获取上一个月的第一天', this.lastFistDay);
            }

        },

        // 获取上一个月的最后一天
        getLastDayOfPreviousMonthFormatted() {
            const today = new Date();
            today.setMonth(today.getMonth() - 1);
            const toDAYMonth = this.formatDate(today).substring(0, 7);
            if (toDAYMonth == this.nowMonth) {
                const lastDayOfPreviousMonth = new Date(today.getFullYear(), today.getMonth(), 0); // 当月的第一天的前一天就是上一个月的最后一天
                this.lastEndDay = this.formatDate(lastDayOfPreviousMonth);
                console.log('获取上一个月的最后一天', this.lastEndDay);
            } else {
                //如果所选月份不为当日所在月份 则当月最后一天为月末天数
                const [year, month] = this.nowMonth.split('-').map(str => parseInt(str, 10));
                // 创建表示下个月第一天的 Date 对象
                const lastDay = new Date(year, month - 1, 1); // 设置为0会回退到上个月的最后一天
                const lastDayFormatted = lastDay.toISOString().split('T')[0]; // "YYYY-MM-DD"
                this.lastEndDay = lastDayFormatted;
                console.log('获取上一个月的最后一天', this.lastEndDay);
            }
        },
        // 格式化日期为 YY,YY-MM-DD
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        // 格式化月份为 YYYY-MM
        formatMonth(date) {
            const month = date.getMonth() + 1; // 月份从0开始，需要加1
            return `${month}`;
        }
    }
};
</script>


<style lang="scss" scoped>
.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner13.png);
    display: flex;
    justify-content: center;

}

* {
    padding: 0;
    margin: 0;
}

.box {
    width: 70%;
    height: 70%;
    // border: 1px solid red;
    margin-top: 210px;
    display: flex;
    margin-left: 30px;

    .left {
        width: 400px;
        height: 100%;
        // border: 1px solid yellow;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: -90px;
        margin-top: 20px;

        p {
            font-size: 40px;
            color: white;
            font-weight: 300;
            width: 150%;
            // border: 1px solid red;
        }

        .leftIMG {
            width: 400px;
            height: 400px;
            background-image: url(../../../assets/Frame28-1.png);
            // background-repeat: no-repeat;
            // background-size: cover;
            margin-top: 60px;
            margin-bottom: 60px;
            // border: 1px solid orange;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;

            .big {
                font-size: 40px;
                color: white;
            }

            .small {
                font-size: 10px;
                color: white;
                opacity: 0.7;
            }

            .baifenbi {
                font-size: 32px;
                color: #57f1fa;
                position: absolute;
                bottom: 30px;
            }
        }

        .fastTime {
            font-size: 64px;
            color: #567fff;
            margin-left: 10px;
            margin-right: 10px;
        }

        .bottom {
            width: 100%;
            height: 160px;
            // border: 1px solid orange;
            display: flex;
            position: relative;

            .bl {
                width: 50%;
                height: 100%;
                // border: 1px solid red;
                display: flex;
                align-items: center;
                flex-direction: column;

                p {
                    font-size: 24px;

                    .num {
                        font-size: 52px;
                        color: #567fff;
                    }
                }
            }

            .br {
                width: 50%;
                height: 100%;
                // border: 1px solid yellow;

                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: flex-end;

                p {
                    font-size: 24px;

                    .num {
                        font-size: 52px;
                        color: #567fff;
                    }
                }
            }

            .xiegang {
                position: absolute;
                top: 50%;
                /* 将子元素的上边缘移动到父容器垂直中心 */
                left: 50%;
                /* 将子元素的左边缘移动到父容器水平中心 */
                transform: translate(-50%, -50%);
                /* 将子元素向左和向上移动自身宽度和高度的一半 */
            }
        }
    }

    .center {
        width: 681px;
        height: 100%;
        // border: 1px solid white;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;

        .centerIMG {
            // border: 1px solid yellow;
            width: 681px;
            height: 561px;
            margin-top: 50px;
            background-image: url(../../../assets/Frame126.png);
            background-repeat: no-repeat;
            background-size: cover;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .big {
                font-size: 32px;
                color: #97a5e8;
                letter-spacing: 14px;

                .num {
                    font-size: 60px;
                    color: #57f1fa;
                }
            }

            .small {
                font-size: 32px;
                color: #97a5e8;
                letter-spacing: 14px;

                .num {
                    font-size: 60px;
                    color: #f25666;
                }


            }


        }
    }

    .right {
        width: 400px;
        height: 100%;
        // border: 1px solid yellow;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -90px;
        margin-top: 20px;

        p {
            font-size: 40px;
            color: white;
            font-weight: 300;
            width: 150%;
            // border: 1px solid red;
        }

        .leftIMG {
            width: 400px;
            height: 400px;
            background-image: url(../../../assets/Frame111-1.png);
            // background-repeat: no-repeat;
            // background-size: cover;
            margin-top: 60px;
            margin-bottom: 60px;
            // border: 1px solid orange;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;

            .big {
                font-size: 40px;
                color: white;
            }

            .small {
                font-size: 10px;
                color: white;
                opacity: 0.7;
            }

            .baifenbi {
                font-size: 32px;
                color: #f25666;
                position: absolute;
                bottom: 30px;
            }
        }

        .fastTime {
            font-size: 64px;
            color: #be833b;
            margin-left: 10px;
            margin-right: 10px;
        }

        .bottom {
            width: 100%;
            height: 160px;
            // border: 1px solid orange;
            display: flex;
            position: relative;

            .bl {
                width: 50%;
                height: 100%;
                // border: 1px solid red;
                display: flex;
                align-items: center;
                flex-direction: column;

                p {
                    font-size: 24px;

                    .num {
                        font-size: 52px;
                        color: #be833b;
                    }
                }
            }

            .br {
                width: 50%;
                height: 100%;
                // border: 1px solid yellow;

                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: flex-end;

                p {
                    font-size: 24px;

                    .num {
                        font-size: 52px;
                        color: #be833b;
                    }
                }
            }

            .xiegang {
                position: absolute;
                top: 50%;
                /* 将子元素的上边缘移动到父容器垂直中心 */
                left: 50%;
                /* 将子元素的左边缘移动到父容器水平中心 */
                transform: translate(-50%, -50%);
                /* 将子元素向左和向上移动自身宽度和高度的一半 */
            }
        }


    }
}
</style>